<!-- 定义组件模板，包含日程列表容器和对话框 -->
<template>
  <!-- 点击容器显示日程列表对话框 -->
  <div class="schedule-container" @click="dialogVisible = true">
    <!-- 当有进行中的日程时显示日程列表 -->
    <div class="list" v-if="activeSchedules.length > 0">
      <!-- 遍历进行中的日程并显示每个日程项 -->
      <div class="item" v-for="item in activeSchedules" :key="item.id">
        <!-- 显示日程的时间范围 -->
        <div class="time-range">
          {{ formatTime(item.startTime) }} - {{ formatTime(item.endTime) }}
        </div>
        <!-- 显示日程的标题和地点 -->
        <div class="content">
          <p class="title">{{ item.title }}</p>
          <!-- 当日程有地点信息时显示地点 -->
          <p class="location" v-if="item.location">地点：{{ item.location }}</p>
        </div>
      </div>
    </div>
    <!-- 当没有进行中的日程时显示提示信息 -->
    <div class="empty-tip" v-else>
      暂无当前进行中的日程
    </div>
  </div>
  <!-- 引入日程列表对话框组件并绑定显示状态 -->
  <ScheduleListDialog v-model="dialogVisible" />
</template>

<script lang="ts" setup>
// 从 vue 导入计算属性和响应式引用
import { computed, ref, type ComputedRef } from 'vue';
// 从日程仓库导入日程管理逻辑
import { useScheduleStore } from '@/stores/scheduleStore';
// 导入时间处理库 moment
import moment from 'moment';
// 导入日程列表对话框组件
import ScheduleListDialog from './schedule-list-dialog.vue';
// 导入日程实体类型
import type Schedule from '@/entity/Schedule';

// 定义对话框显示状态的响应式引用
const dialogVisible = ref<boolean>(false)

// 初始化日程仓库实例
const scheduleStore = useScheduleStore();

// 计算当前时间的 ISO 格式字符串
const currentTime: ComputedRef<string> = computed(() => moment().toISOString());

// 筛选当前进行中的日程，即开始时间 <= 当前时间 <= 结束时间
const activeSchedules: ComputedRef<Schedule[]> = computed(() => {
  return scheduleStore.scheduleList.filter(item => {
    const start = moment(item.startTime);
    const end = moment(item.endTime);
    const now = moment(currentTime.value);
    // 包含边界条件
    return now.isBetween(start, end, null, '[]'); 
  });
});

// 时间格式化函数，将时间字符串格式化为 HH:mm 格式
const formatTime = (timeStr: string): string => {
  return moment(timeStr).format('HH:mm');
};
</script>

<style lang="scss" scoped>
// 定义日程列表容器样式
.schedule-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  // 定义日程列表样式
  .list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow: auto;

    // 定义每个日程项样式
    .item {
      background: rgba(248, 249, 250, 0.15);
      border-radius: 8px;
      padding: .5rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      // 定义日程时间范围样式
      .time-range {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0;
      }

      // 定义日程内容样式
      .content {
        // 定义日程标题样式
        .title {
          font-size: 1.1rem;
          color: #212529;
          margin: 0;
        }

        // 定义日程地点样式
        .location {
          color: #6c757d;
          font-size: 0.9rem;
          margin: 0;
        }
      }
    }
  }

  // 定义无日程提示信息样式
  .empty-tip {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6c757d;
    font-size: 1rem;
  }
}
</style>